<template>
	<scroll-view class="swiper-scroll" scroll-y="true" :scroll-top='scrollPosition' @scroll='pagescroll' scroll-with-animation lower-threshold='500'
	 @scrolltolower='getNextPage' :refresher-threshold='75' :refresher-triggered='triggeredstate' :refresher-enabled='canrefresh && canrefush'
	 @refresherrefresh='refresh' @refresherrestore="onRestore" refresher-default-style='none' :bounce='false'>
		
		<view class="classify-item-wrapper colRange">
			<!-- 加载图片 -->
			<view class="loading-img rowRanges" :style="'margin-top:'+(topheight-75)+'px;'">
				<view class="imgbox defImg">
					<image src="../static/img/home/loading.gif" mode="aspectFit"></image>
				</view>
			</view>
			<!-- 二级分类 -->
			<view class="child-classification-container colRange">
				<view class="classify-item-container rowRange borderBox">
					<block v-for="(childClassify,index) in childClassifyList" :key="index">
						<view class="classification-item colRange" @tap="goPath()">
							<view class="items-container colRange">
								<view class="defImg classpic">
									<image :src="appUrl + childClassify.imgUrl" mode="aspectFill"></image>
								</view>
								<view class="className-box">
									<view>{{childClassify.classifyName}}</view>
								</view>
							</view>
						</view>
					</block>
				</view>
			</view>
			
			<view class="goods-sort-container colRange borderBox">
				<!-- 排序方式 -->
				<view class="sort-container rowRangeAve borderBox">
					<block v-for="(sort,index) in sortList" :key="index">
						<view class="items-container rowRanges" :class="showType==sort.type?'items-container-active':''" @click="selectSort(sort.type)">
							<view class="sortname">
								{{sort.sortname}}
							</view>
							<view class="defImg directionbox" v-if="index==3">
								<image v-if="showType!=100" src="https://cmsstatic.ffquan.cn//wap_new/search/images/sort.svg" mode=""></image>
								<block v-else>
									<image v-if="priceUp" src="https://cmsstatic.ffquan.cn//wap_new/search/images/asce.svg" mode=""></image>
									<image v-else src="https://cmsstatic.ffquan.cn//wap_new/search/images/desc.svg" mode=""></image>
								</block>
							</view>
						</view>
					</block>
				</view>
				<view class="goods-list-container">
					<!--  商品列表 -->
					<good-card-index v-for="(good, index) in goodsList"
						:itemid="good.itemid"
						:shoptype="good.shoptype"
						:itempic="good.itempic ? good.itempic + '_310x310.jpg' : 'https://tk.gomyorder.cn/logo.png'"
						:itemtitle="good.itemtitle" :shopname='good.shopname'
						:itemprice="'¥' + good.itemprice" :itemsale="good.itemsale"
						:itemendprice="'' + good.itemendprice" :couponmoney="good.couponmoney">
					</good-card-index>
				</view>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	export default {
		props: {
			topheight: {
				type: Number,
				default: 10
			},
			canload: {
				type: Boolean,
				default: false
			},
			canrefush:{
				type:Boolean
			},
			parentId: [Number, String],
		},
		data() {
			return {
				appUrl:this.$store.state.vuex_config.appUrl,
				//当前排序方式
				sortType: 14,
				showType: 14,
				//往上排序
				priceUp: false,
				//二级分类
				childClassifyList: [],
				//商品列表
				goodsList: [],
				//排序
				sortList: [{
						sortname: '人气',
						type: '14'
					},
					{
						sortname: '最新',
						type: '0'
					},
					{
						sortname: '销量',
						type: '4'
					},
					{
						sortname: '价格',
						type: '100'
					}
				],

				canloadmore: false,
				//当前分页
				currentPage: 1,
				loadstatus: 'loading',

				//scroll顶部
				scrollPosition: 0,
				canrefresh: true,
				triggeredstate: true,
				canrefresh: true,
			}
		},
		created() {
			this.currentPage = 1
			this.canloadmore = false
			this.loadstatus = 'loading'
			if (this.canload) {
				if (this.parentId) {
					this.getClassifyList()
					this.getGoodsList();
				}
			}
		},
		watch: {
			canload(nval, oval) {
				if (nval) {
					this.currentPage = 1
					this.canloadmore = false
					this.getClassifyList()
					this.getGoodsList();
				}
			}
		},
		methods: {
			refresh(e) {
				this.triggeredstate = true
				if (this._freshing) return;
				this._freshing = true;
				this.goodsList = [];
				this.currentPage = 1;
				this.canloadmore = false;
				this.loadstatus = 'loading';
				//获取分类
				this.getClassifyList();
				this.getGoodsList();
			},
			onRestore() {
				console.log('下拉被终止')
			},
			pagescroll(e) {
				this.$emit('scrollNum', e.detail.scrollTop)
				if (!e.detail.scrollTop > 0) {
					setTimeout(() => {
						this.canrefresh = true
					})
				}
			},

			onAbort() {
				console.log('refushstop');
			},
			//获取商品列表
			getGoodsList() {
				this.$u.api.goods({
					cid: this.parentId,
					min_id:this.currentPage,
					sort:this.sortType,
					back:20
				}).then((res) => {
					if (res.code == 1){
						if (res.data.length < 20) {
							this.loadingState = false
							this.loadstatus = 'normal'
						} else {
							this.loadstatus = 'loading'
							this.loadingState = true
						}
						setTimeout(() => {
							this.triggeredstate = false;
							this._freshing = false;
						}, 100)
						this.goodsList = res.data;
						this.currentPage = res.min_id;
					}
				})
			},
			//获取下一页数据
			getNextPage() {
				this.$u.api.goods({
					cid: this.parentId,
					min_id:this.currentPage,
					sort:this.sortType,
					back:20
				}).then((res) => {
					if (res.code == 1){
						if (res.data.length < 20) {
							this.loadingState = false
							this.loadstatus = 'normal'
						} else {
							this.loadstatus = 'loading'
							this.loadingState = true
						}
						setTimeout(() => {
							this.triggeredstate = false;
							this._freshing = false;
						}, 100)
						this.goodsList = this.goodsList.concat(res.data);
						this.currentPage = res.min_id;
					}
				})
			},
			getClassifyList() {
				this.$u.api.childClassify({
					classifyType: 1,
					classifyCid: this.parentId
				}).then((res) => {
					if (res.code != 200){
						this.$u.toast(res.msg);
					}
					this.childClassifyList = res.data;
				})
			},
			//选择排序
			selectSort(type) {
				this.showType=type;
				this.currentPage = 1
				this.canloadmore = false
				if (type != 100) {
					if (type != this.sortType) {
						this.sortType = type;
					}
				} else {
					this.priceUp = !this.priceUp;
					if (this.priceUp) {
						this.sortType = 2
					} else {
						this.sortType = 1
					}
				}
				this.$nextTick(() => {
					this.getGoodsList();
				})
			},
			goPath(info) {
				uni.navigateTo({
					url: './categories?cid=' + info.cid + '&title=' + info.cname
				})
			}
		}
	}
</script>

<style lang="scss">
.swiper-scroll{
	width: 100%;
	height: 100vh;
}

.classify-item-wrapper{
	width: 100%;
	.loading-img {
		width: 100%;
		height: 150rpx;
		.imgbox {
			width: 208rpx;
			height: 126rpx;
		}
	}
	.child-classification-container{
		width: 100%;
		background-color: #FFFFFF;
		.classify-item-container{
			flex-wrap: wrap;
			margin-top: 20rpx;
			.classification-item{
				width: 145rpx;
				.items-container {
					margin-bottom: 40rpx;
					.classpic {
						width: 95rpx;
						height: 95rpx;
					}
					.className-box {
						font-size: 24rpx;
						font-weight: 400;
						color: #333333;
						margin-top: 15rpx;
					}
				}
			}
		}
	}
	.goods-sort-container{
		width: 100%;
		.sort-container{
				width: 100%;
				height: 100rpx;
				background-color: #FFFFFF;
				padding: 0 50rpx;
				.items-container {
					width: 150rpx;
					.sortname {
						font-size: 24rpx;
						font-weight: 400;
						color: #333333;
					}
					.directionbox {
						width: 25rpx;
						height: 35rpx;
						margin-left: 5rpx;
					}
				}
				.items-container-active {
					.sortname {
						color: #FF4242;
					}
				}
		}
	}
	.goods-list-container{
		padding: 0 5rpx;
	}
}
</style>
